<template>
	<view>
		<view>
			<u-navbar title="中南大学铁道六食堂"></u-navbar>
		</view>
		<view class="blank"></view>

		<view id="lineup">
			<view class="OneOrder">
				<view class="top">
					<!-- 预约记录 -->
					<view>
						<text class="text_yyjl">预约记录</text>
						<br />
						<text v-text="orderMsg"></text>
					</view>
				</view>
				<view class="buttom">
					<view class="btn" v-show="orderstate">
						<u-button text="我要预约" size="big" shape="square" color="	#48D1CC"
							@click="orderbutton()">
						</u-button>
					</view>
					<view class="btn" v-show="deorderstate">
						<u-button text="取消预约" size="big" shape="square" color="red"
							@click="unorderbutton()"></u-button>
					</view>
				</view>
			</view>


			<view class="blank">
				<u-divider></u-divider>
			</view>


			<view class="OneOrder_buttom">
				<view class="top">
					<!-- 序号和预计排队时间以及剩余桌数-->
					<view v-show="lineupshow" class="text_buttom">
						<view class="restaurantMsgli">
							<text>还有4桌</text>
						</view>
					</view>
					<view class="text_buttom" v-show="lineupshow">
						<text v-text="'您的序号是：'+id"></text>
						<br/>
						<text v-text="'排队状态'"></text>
					</view>
					<view>
						<view v-show="lineupshow1">
							<u-steps current="0">
								<u-steps-item title="排队中"></u-steps-item>
								<u-steps-item title="已排到"></u-steps-item>
							</u-steps>
						</view>
						<view v-show="lineupshow2">
							<u-steps current="1">
								<u-steps-item title="排队中"></u-steps-item>
								<u-steps-item title="已排到"></u-steps-item>
							</u-steps>
						</view>

					</view>
					<view class="text_buttom" v-show="false">
						<u-count-down ref="timmer" :time="time1" format=""
							@finish="lineupend()">
						</u-count-down>
					</view>
					<view class="text_buttom" v-show="lineupshow">
						<u-count-down ref="timmer" :time="time" format="预计还需等待时间：HH:mm:ss"
							:autoStart="false">
						</u-count-down>
					</view>
				</view>
				<u-divider></u-divider>
				<view class="buttom">
					<view class="buttom">
						<view v-show="lineupstate">
							<u-button text="我要排队" size="big" shape="square" color="#48D1CC"
								@click="lineupbutton()"></u-button>
						</view>
						<view v-show="delineupstate">
							<u-button text="放弃排队" size="big" shape="square" color="red"
								@click="unlineupbutton()"></u-button>
						</view>
						<view v-show="lineupshow2">
							<u-button text="排队成功" size="big" shape="square" color="lightgreen">
							</u-button>
						</view>
					</view>
				</view>
			</view>

			<!-- 	<view>
				<u--text v-show="lineupshow2" v-text="id">取餐号</u--text>
			</view> -->

			<view>
				<u-calendar startText="住店" endText="离店" confirmDisabledText="请选择离店日期" :formatter="formatter"
					:show="calendershow" :mode="mode" @confirm="dateconfirm" @close="dateclose" ref="calendar">
				</u-calendar>
			</view>
			<!-- 取消预约弹窗 -->
			<view>
				<u-modal :show="unordershow" :title="unordertitle" :content='unordercontent' :showCancelButton=true
					@confirm="unorderconfirmbutton()" @cancel="disunorderconfirmbutton()"></u-modal>
			</view>
			<!-- 排队弹窗 -->
			<view>
				<u-modal :show="lineupconfirmshow" :title="lineuptitle" :content='lineupcontent' :showCancelButton=true
					@confirm="lineupconfirmbutton()" @cancel="dislineupconfirmbutton()"></u-modal>
			</view>
			<!-- 取消排队弹窗 -->
			<view>
				<u-modal :show="unlineupconfirmshow" :title="unlineuptitle" :content='unlineupcontent'
					:showCancelButton=true @confirm="unlineupconfirmbutton()" @cancel="disunlineupconfirmbutton()">
				</u-modal>
			</view>
			<!-- 成功弹窗 -->
			<view>
				<u-notify message="successMsg" :show="successshow"></u-notify>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				lineupshow1111: false,

				orderstate: true,
				lineupstate: true,
				deorderstate: false,
				delineupstate: false,
				// 排队信息
				time: 180000,
				time1: 1000000,
				id: 1033,
				number: 123,
				// 预约信息
				orderMsg: "您当前没有预约记录",
				// 日历
				calendershow: false,
				mode: 'single',
				// 取消预约弹窗
				unordershow: false,
				unordertitle: '取消预约',
				unordercontent: '取消预约之后再次预约需要重新排队,您确定要取消预约吗？',
				// 排队弹窗
				lineupconfirmshow: false,
				lineuptitle: '排队',
				lineupcontent: '您要排队吗？',
				// 取消排队弹窗
				unlineupconfirmshow: false,
				unlineuptitle: '取消排队',
				unlineupcontent: '取消排队之后再次预约需要重新排队,您确定要取消预约吗？',
				// 预约或者取消预约成功通知
				successshow: false,
				successMsg: "成功！",
				// 排队消息提示
				lineupshow: false,
				lineupshow1: false,
				lineupshow2: false,
				restaurantid: '',
				// 0表示进行中的订单
				restaurantMsg: [{
					restaurantID: '123',
					address: '东二门',
					businessHours: '10:00-22:00',
					phone: '18108450410',
					emptyTableNum: 4
				}]

			}
		},
		onReady() {
			// 如果需要兼容微信小程序的话，需要用此写法
			this.$refs.calendar.setFormatter(this.formatter)
		},

		methods: {
			// 预约按钮
			orderbutton() {
				this.calendershow = true;
			},
			// 预约之后的日期选择界面
			dateconfirm(e) {
				this.orderMsg = "您当前预约的日期为：" + e[0];
				this.calendershow = false;
				this.orderstate = false;
				this.deorderstate = true;
			},
			dateclose() {
				this.calendershow = false;
			},
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				if (day.month == month && day.day == date + 3) {
					day.bottomInfo = '有优惠'
					day.dot = true
				}
				return day
			},
			// 取消预约按钮
			unorderbutton() {
				this.unordershow = true;
				this.orderstate = true;
				this.deorderstate = false;
			},
			// 取消预约按钮
			unorderconfirmbutton() {
				this.unordershow = false;
				this.orderMsg = "您当前没有预约记录";
				// this.successshow = true;
				// this.successMsg = "取消预约成功！"
			},
			disunorderconfirmbutton() {
				this.unordershow = false;
				// this.successshow = true;
				// this.successMsg = "取消预约成功！"
			},
			// 点击排队
			lineupbutton() {
				this.lineupconfirmshow = true;
			},
			// 确认排队界面确认
			lineupconfirmbutton() {

				this.lineupshow = true;
				this.lineupshow1 = true;
				this.lineupshow2 = false;
				this.lineupconfirmshow = false;
				this.$refs.timmer.start();
				this.delineupstate = true;
				this.lineupstate = false;
			},
			// 确认排队界面取消
			dislineupconfirmbutton() {
				this.lineupconfirmshow = false;
			},

			// 点击取消排队
			unlineupbutton() {
				this.unlineupconfirmshow = true;
			},
			// 取消排队界面确认
			unlineupconfirmbutton() {
				this.lineupshow = false;
				this.lineupshow1 = false;
				this.lineupshow2 = false;
				this.unlineupconfirmshow = false;
				this.$refs.timmer.reset();
				this.delineupstate = false;
				this.lineupstate = true;
			},
			// 取消排队界面取消
			disunlineupconfirmbutton() {
				this.unlineupconfirmshow = false;
			},
			// 排队结束
			lineupend() {
				this.lineupshow1 = false;
				this.lineupshow2 = true;
				this.delineupstate = false;

				uni.switchTab({
					url: "../list/list"
				})
			}
		}
	}
</script>
<!-- 分段器 -->

<style lang="scss">
	.blank {
		height: 80rpx;
	}

	#lineup {
		.OneOrder_buttom {
			margin-left: 5%;
			margin-right: 5%;
			background-color: #FFFFFF;
			font-size: 36rpx;

			.text_buttom {
				margin-left: 20rpx;
			}
		}

		.OneOrder {
			background-color: #FFFFFF;
			height: 300rpx;
			margin-left: 5%;
			margin-right: 5%;
			margin-top: 40rpx;

			.top {
				display: flex;
				flex-direction: row;
				margin-left: 30rpx;
				margin-top: 60rpx;
				font-size: 32rpx;

				.nameOfShop {
					margin-left: 20rpx;
					margin-top: 20rpx;
					width: 70%;
					font-weight: bold;
					font-size: 40rpx;
				}

				.text_yyjl {
					// margin-left: 20rpx;
					font-size: 48rpx;
					font-weight: bolder;
				}

				.statusComplete {
					margin-right: 10%;
					margin-top: 20rpx;
					font-weight: lighter;
					color: #778899;
				}

				.statusNoComplete {
					margin-right: 10%;
					margin-top: 20rpx;
					font-weight: lighter;
					color: #48D1CC;
				}
			}

			.buttom {
				display: flex;
				flex-direction: row;
				font-size: 38rpx;
				margin-left: 20rpx;
				margin-top: 40rpx;

				.btn {
					width: 100%;
					background-color: #00CED1;
				}

				.dataTime {
					margin-left: 10%;
					width: 100%;
					font-size: 38rpx;
				}

				.Money_order {
					margin-left: 10%;
					margin-top: 5%;
					width: 100%;
					font-size: 32rpx;
				}
			}
		}
	}

	page {
		background: #EFEFEF;
	}
</style>
